import apiTool, { getUserInfoUrl, getUserTypeValue } from "@/command/apiTool";
import { defineComponent, reactive } from "vue";
import PageTitle from "@/components/PageTitle";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import Text from "@/components/Text";
import { Divider } from "vant";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import CardView from "@/components/CardView";
import BackGroundImage from "@/components/BackGroundImage";
import { useRouter } from "vue-router";
import Banner from "@/components/Banner";
import { useDetail } from "@/hooks";

export default defineComponent({
  setup(props, {}) {
    const router = useRouter();
    const form = reactive({});
    const [suggest] = useDetail("/api/H5/sell/showSale/suggest", { img: "" });
    const renderItem = (e: any) => {
      const data = [
        {
          name: "",
          value: e.introduce,
          textEllipsis: true,
        },
        {
          name: "时间",
          value: e.showTime,
        },
        {
          name: "地点",
          value: e.address,
        },
      ];
      return (
        <div
          class="flex flex-col mt-[14px] w-full"
          onClick={() => router.push(`/exhibitionDetail?id=${e.id}`)}
        >
          <RoundInfo
            src={e.img}
            title={e.title}
            data={data}
            class={"exhibit-sell"}
            itemWidth={"100%"}
          />
        </div>
      );
    };
    const render1 = () => {
      return (
        <BackGroundImage>
          <CardView title={"推荐展会"}>
            <div>
              <Banner
                url={suggest.value.img}
                class="!h-[100px] w-full rounded-8"
              />
            </div>
          </CardView>
        </BackGroundImage>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "exhibitionType", key: "showType", title: "类型" },
        // { type: "productType", key: "categoryId" },
        { type: "datePicker", key: "createDate", title: "日期" },
      ];
      return (
        <CardView title={"展会列表"} >
          <FilterMenuSearch choose={data} v-model={form} searchKey="title" />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/sell/showSale/showList",
              xh: "/api/H5/sell/showSale/showList",
            })}
            type="page"
            itemHeight={150}
            themeStyle={"list-bottom-border"}
            renderItem={renderItem}
            params={form}
          />
        </CardView>
      );
    };
    return () => (
      <PageTitle title={"帮展销"}>
        {render1()}
        {render2()}
      </PageTitle>
    );
  },
});
